<template>
  <div class="money">
    <!-- 员工薪资数据部分 -->
    <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%" max-height='500'>
      <el-table-column label="姓名" prop="name" align="center">
      </el-table-column>
      <el-table-column label="工号" prop="code" align="center">
      </el-table-column>
      <el-table-column label="职位" prop="post" align="center">
      </el-table-column>
      <el-table-column label="考勤天数" prop="checkdate" align="center">
      </el-table-column>
      <el-table-column label="上班天数" prop="bedate" align="center">
      </el-table-column>
      <el-table-column label="请假天数" prop="leavedate" align="center">
      </el-table-column>
      <el-table-column label="缺勤情况" prop="absence" align="center">
      </el-table-column>
      <el-table-column label="迟到情况" prop="beLate" align="center">
      </el-table-column>
      <el-table-column label="请假情况" prop="ask" align="center">
      </el-table-column>
      <el-table-column label="奖金/提成" prop="bonus" align="center">
      </el-table-column>
      <el-table-column label="应发工资" prop="salary" align="center">
      </el-table-column>
      <el-table-column label="罚款与税务" prop="fine" align="center">
      </el-table-column>
      <el-table-column label="实发工资" prop="pay" align="center">
      </el-table-column>
    </el-table>
    <!-- 修改部分 -->
    <div class="ipt">
      <span>姓名:</span>
      <el-input v-model="upname" placeholder="请输入姓名" class="size"></el-input>
      <span>工号</span>
      <el-input v-model="upcode" placeholder="请输入工号" class="size"></el-input>
      <span>修改项：</span>
      <el-select v-model="upval" placeholder="请选择修改项" class="size">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <span>修改内容</span>
      <el-input v-model="updata" placeholder="请输入修改内容" class="size"></el-input>
      <el-button type="primary" @click = "tables()">确定</el-button>
      <el-button @click="cancelUP()">重置</el-button>
    </div>
    <!-- 分页组件 -->
    <!-- <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[10, 20, 30, 40,50]"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
        </el-pagination>
      </div> -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //员工薪资数据
        tableData: [{
            name: '王小虎',
            code: 'JX122222',
            post: '教师',
            checkdate: 26,
            bedate: 26,
            leavedate: 0,
            absence: 0,
            beLate: 0,
            ask: 0,
            bonus: 8000,
            salary: 10000,
            fine: 0,
            pay: 18000
          }, {
            name: '王小虎',
            code: 'JX122222',
            post: '教师',
            checkdate: 26,
            bedate: 26,
            leavedate: 0,
            absence: 0,
            beLate: 0,
            ask: 0,
            bonus: 8000,
            salary: 10000,
            fine: 0,
            pay: 18000
          }, {
            name: '王小虎',
            code: 'JX122222',
            post: '教师',
            checkdate: 26,
            bedate: 26,
            leavedate: 0,
            absence: 0,
            beLate: 0,
            ask: 0,
            bonus: 8000,
            salary: 10000,
            fine: 0,
            pay: 18000
          }, {
            name: '王镜康',
            code: 'JX111555',
            post: '教师',
            checkdate: 26,
            bedate: 26,
            leavedate: 0,
            absence: 0,
            beLate: 0,
            ask: 0,
            bonus: 8000,
            salary: 10000,
            fine: 0,
            pay: 18000
          },
          {
            name: '王小虎',
            code: 'JX122222',
            post: '教师',
            checkdate: 26,
            bedate: 26,
            leavedate: 0,
            absence: 0,
            beLate: 0,
            ask: 0,
            bonus: 8000,
            salary: 10000,
            fine: 0,
            pay: 18000
          },
          {
            name: '王小虎',
            code: 'JX122222',
            post: '教师',
            checkdate: 26,
            bedate: 26,
            leavedate: 0,
            absence: 0,
            beLate: 0,
            ask: 0,
            bonus: 8000,
            salary: 10000,
            fine: 0,
            pay: 18000
          },
          {
            name: '王小虎',
            code: 'JX122222',
            post: '教师',
            checkdate: 26,
            bedate: 26,
            leavedate: 0,
            absence: 0,
            beLate: 0,
            ask: 0,
            bonus: 8000,
            salary: 10000,
            fine: 0,
            pay: 18000
          },
          {
            name: '王小虎',
            code: 'JX122222',
            post: '教师',
            checkdate: 26,
            bedate: 26,
            leavedate: 0,
            absence: 0,
            beLate: 0,
            ask: 0,
            bonus: 8000,
            salary: 10000,
            fine: 0,
            pay: 18000
          }, {
            name: '王小虎',
            code: 'JX122222',
            post: '教师',
            checkdate: 26,
            bedate: 26,
            leavedate: 0,
            absence: 0,
            beLate: 0,
            ask: 0,
            bonus: 8000,
            salary: 10000,
            fine: 0,
            pay: 18000
          }, {
            name: '王小虎',
            code: 'JX122222',
            post: '教师',
            checkdate: 26,
            bedate: 26,
            leavedate: 0,
            absence: 0,
            beLate: 0,
            ask: 0,
            bonus: 8000,
            salary: 10000,
            fine: 0,
            pay: 18000
          }, {
            name: '王小虎',
            code: 'JX122222',
            post: '教师',
            checkdate: 26,
            bedate: 26,
            leavedate: 0,
            absence: 0,
            beLate: 0,
            ask: 0,
            bonus: 8000,
            salary: 10000,
            fine: 0,
            pay: 18000
          },
          {
            name: '王小虎',
            code: 'JX122222',
            post: '教师',
            checkdate: 26,
            bedate: 26,
            leavedate: 0,
            absence: 0,
            beLate: 0,
            ask: 0,
            bonus: 8000,
            salary: 10000,
            fine: 0,
            pay: 18000
          },
          {
            name: '王小虎',
            code: 'JX122222',
            post: '教师',
            checkdate: 26,
            bedate: 26,
            leavedate: 0,
            absence: 0,
            beLate: 0,
            ask: 0,
            bonus: 8000,
            salary: 10000,
            fine: 0,
            pay: 18000
          },
          {
            name: '王小虎',
            code: 'JX122222',
            post: '教师',
            checkdate: 26,
            bedate: 26,
            leavedate: 0,
            absence: 0,
            beLate: 0,
            ask: 0,
            bonus: 8000,
            salary: 10000,
            fine: 0,
            pay: 18000
          }
        ],
        search: '',
        //修改选项
        options: [{
            value: '选项1',
            label: '职位'
          },
          {
            value: '选项2',
            label: '请假天数'
          },
          {
            value: '选项3',
            label: '缺勤情况'
          },
          {
            value: '选项4',
            label: '迟到情况'
          },
          {
            value: '选项5',
            label: '奖金/提成'
          }
        ],
        //修改数据
        upname: '',
        upcode: '',
        upval: '',
        updata: '',
        // 分页的参数
        // total: this.total,
        currentPage: 1, //当前页数
        pageSize: 10 // 每页显示条数

      }
    },
    computed: {
      tables() {
        const upname = this.upname;
        const upcode = this.upcode;

        if (upname && upcode) {
          console.log("upname输入的搜索内容：" + this.upname);
          console.log("upcode输入的搜索内容：" + this.upcode);
          return this.tableData.filter(data => {
            console.log("object:" + Object.keys(data))
            return Object.keys(data).some(key => {
              return String(data[key]).toLowerCase().indexOf(upname) > -1
              // String(data[key]).toLowerCase().indexOf(upcode) > -1)
            })
          })
        }
        return this.tableData
      }
    },
    methods: {
      //重置修改
      cancelUP() {
        this.upname = '';
        this.upcode = '';
        this.upval = '';
        this.updata = '';
      },
      //分页方法
      handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
        // console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        this.currentPage = val
        console.log(`当前页: ${val}`);
      },
    }
  }
</script>

<style scoped="scoped">
  .money {
    /* width: 800px; */
    overflow: hidden;
  }

  .ipt {
    margin-top: 15px;
    float: left;
    margin: 15px 0px 0px 15px;
  }

  .size {
    width: 200px;
    margin-right: 15px;
  }
</style>
